<template>
  <div>
    <div class="titleViewer">
      <div class="primary-container description">
        <div class="wrapper">
          <div class="title">
            <h1 tabindex="-1">所有<br />按钮</h1>
            <div class="description">当您选择正确的按钮让用户操作时<br />请考虑每种按钮类型提供的强调级别。</div>
          </div>
        </div>
      </div>
      <div class="primaryImagePicker" style="background-image: url('https://lh3.googleusercontent.com/-vhZPicXOUIFJRvtEOiJhwjltze1BWwhVFg1eDjXQ3eYqB-vs7XRiNXVzxwuuBqKoiNWjhP4ANztr6hiw4RoqrVD9btCL6GXekXJ6lnG2C-3GF9t252X=w1200-rj')">
        <div class="foregroundImagePicker" style="background-image: url('https://lh3.googleusercontent.com/dvqO0LIzHxftNZmnygFdFPRsgLqXDCeS5jVeg6aodATDJY1biZfvlzkGnt9PcfrWxVRDoMutujA-qOo_U2h6rKh88hACc-t30iM8pXfK36RHtBL-WA=w1200')"></div>
      </div>
    </div>
    <div class="introduce">
      <p>Luna Material · You includes five types of buttons.</p>
      <p>Luna Material · You提供了5种不同类型的按钮供您选择</p>
    </div>
    <div class="deliverLine"></div>
    <div class="introduce">
      <h1>标准按钮</h1>
      <!--    展示区域-->
      <div class="OverviewArea">
        <p>Button Color</p>
        <p>标准按钮颜色展示</p>
        <div class="OverviewLine">
          <div class="OverViewItem">
            <LunaButton>Action</LunaButton>
            <p>Normal Button</p>
            <p>常规无色按钮</p>
          </div>
          <div class="OverViewItem">
            <LunaButton type="primary">Action</LunaButton>
            <p>Primary Button</p>
            <p>主色调按钮</p>
          </div>
          <div class="OverViewItem">
            <LunaButton type="success">Action</LunaButton>
            <p>Success Button</p>
            <p>成功色调按钮</p>
          </div>
          <div class="OverViewItem">
            <LunaButton type="warning">Action</LunaButton>
            <p>Warning Button</p>
            <p>警告色调按钮</p>
          </div>
          <div class="OverViewItem">
            <LunaButton type="error">Action</LunaButton>
            <p>Error Button</p>
            <p>错误色调按钮</p>
          </div>
          <div class="OverViewItem">
            <LunaButton type="alert">Action</LunaButton>
            <p>Alert Button</p>
            <p>特殊色调按钮</p>
          </div>
        </div>
        <p>Button Lighter Color</p>
        <p>淡色按钮颜色展示</p>
        <div class="OverviewLine">
          <div class="OverViewItem">
            <LunaButton lighter disable>Action</LunaButton>
            <p>Normal Button</p>
            <p>常规按钮禁用</p>
          </div>
          <div class="OverViewItem">
            <LunaButton type="primary" lighter>Action</LunaButton>
            <p>Primary Button</p>
            <p>淡色主色调按钮</p>
          </div>
          <div class="OverViewItem">
            <LunaButton type="success" lighter>Action</LunaButton>
            <p>Success Button</p>
            <p>淡色成功色调按钮</p>
          </div>
          <div class="OverViewItem">
            <LunaButton type="warning" lighter>Action</LunaButton>
            <p>Warning Button</p>
            <p>淡色警告色调按钮</p>
          </div>
          <div class="OverViewItem">
            <LunaButton type="error" lighter>Action</LunaButton>
            <p>Error Button</p>
            <p>淡色错误色调按钮</p>
          </div>
          <div class="OverViewItem">
            <LunaButton type="alert" lighter>Action</LunaButton>
            <p>Alert Button</p>
            <p>淡色特殊色调按钮</p>
          </div>
        </div>
      </div>
      <p>通过设置lighter属性来让标准按钮切换为淡色按钮，淡色按钮是通过您配置的主色调计算生成的。</p>
      <p>在配置完成夜间模式后，即可在切换夜间模式时自动计算为更加黯淡的颜色来降低视觉刺激。</p>
      <highlightjs language="html" :code="NormalButtonCode"></highlightjs>
    </div>
    <div class="deliverLine"></div>
    <div class="introduce">
      <h1>图标按钮</h1>
      <p>在标准按钮的基础上，添加icon属性，可以启用图标。(iconfont图标)</p>
      <p>可以增加suffix属性将图标置于文本之后</p>
      <p>可以利用iconSize属性将其字体图标设置为其他值(Number, String)</p>
      <p>当您设置icon属性后，必须使用 <span class="primaryText">span</span> 标签包裹按钮文本，若无文本则不需书写空的span标签。</p>
      <div class="OverviewArea">
        <p>Text Button</p>
        <p>图标按钮展示</p>
        <div class="OverviewLine">
          <div class="OverViewItem">
            <LunaButton type="primary" lighter icon="icon-kefu"><span>联系客服</span></LunaButton>
            <p>Icon Button</p>
            <p>常规图标按钮</p>
          </div>
          <div class="OverViewItem">
            <LunaButton type="primary" lighter icon="icon-kefu" suffix><span>联系客服</span></LunaButton>
            <p>Icon Button Suffix</p>
            <p>图标后置按钮</p>
          </div>
        </div>
        <highlightjs language="html" :code="IconButtonCode"></highlightjs>
      </div>
    </div>
    <div class="deliverLine"></div>
    <div class="introduce">
      <h1>浮动按钮</h1>
      <p>在标准按钮的基础上，添加fab属性，可以开启浮动按钮模式。</p>
      <p>fab模式下允许配置left、right、top、bottom属性(Number, String)，当您设置了上述四种属性后，按钮会强制开启position: fixed定位模式。</p>
      <p>浮动按钮可以利用size属性将按钮宽高设置为同一个值(Number, String)</p>
      <p>浮动按钮设置iconSize时，请确保输入 <span class="primaryText">Number</span> 类型, 该值将会 * 2进行渲染</p>
      <div class="OverviewArea">
        <p>Fab Button</p>
        <p>浮动按钮展示</p>
        <div class="OverviewLine">
          <div class="OverViewItem">
            <LunaButton type="primary" lighter fab icon="icon-kefu"></LunaButton>
            <p>Fab Button With No Text</p>
            <p>无文本浮动按钮</p>
          </div>
          <div class="OverViewItem">
            <LunaButton type="success" lighter fab icon="icon-kefu"><span>联系客服</span></LunaButton>
            <p>Fab Button With Text</p>
            <p>带有文本浮动按钮</p>
          </div>
          <div class="OverViewItem">
            <LunaButton type="primary" lighter fab icon="icon-kefu" :size="48"></LunaButton>
            <p>Fab Button Resize</p>
            <p>浮动按钮变更大小</p>
          </div>
          <div class="OverViewItem">
            <LunaButton type="primary" lighter fab icon="icon-kefu" :icon-size="12"></LunaButton>
            <p>Fab Button Resize Icon</p>
            <p>浮动按钮图标变更大小</p>
          </div>
        </div>
        <highlightjs language="html" :code="FabButtonCode"></highlightjs>
      </div>
    </div>
    <div class="deliverLine"></div>
    <div class="introduce">
      <h1>文本按钮</h1>
      <p>在标准按钮的基础上，添加text属性，可以启用文本按钮。</p>
      <p>文本按钮的文本颜色将变更为您设置的主色调。</p>
      <p>文本按钮会忽略您设置的lighter属性。</p>
      <p>若您未对文本按钮进行type的配置，将自动使用主题色。</p>
      <div class="OverviewArea">
        <p>Text Button</p>
        <p>文本按钮展示</p>
        <div class="OverviewLine">
          <div class="OverViewItem">
            <LunaButton text>Action</LunaButton>
            <p>Normal Text Button</p>
            <p>常规无色文本按钮</p>
          </div>
          <div class="OverViewItem">
            <LunaButton text type="primary">Action</LunaButton>
            <p>Primary Text Button</p>
            <p>主色调文本按钮</p>
          </div>
          <div class="OverViewItem">
            <LunaButton text type="success">Action</LunaButton>
            <p>Success Text Button</p>
            <p>成功色调文本按钮</p>
          </div>
          <div class="OverViewItem">
            <LunaButton text type="warning">Action</LunaButton>
            <p>Warning Text Button</p>
            <p>警告色调文本按钮</p>
          </div>
          <div class="OverViewItem">
            <LunaButton text type="error">Action</LunaButton>
            <p>Error Text Button</p>
            <p>错误色调文本按钮</p>
          </div>
          <div class="OverViewItem">
            <LunaButton text type="alert">Action</LunaButton>
            <p>Alert Text Button</p>
            <p>特殊色调文本按钮</p>
          </div>
        </div>
        <highlightjs language="html" :code="TextButtonCode"></highlightjs>
      </div>
    </div>
    <div class="deliverLine"></div>
    <div class="introduce">
      <h1>线框按钮</h1>
      <p>在标准按钮的基础上，添加outline属性，可以启用线框按钮。</p>
      <p>线框按钮的文本颜色将变更为您设置的主色调。</p>
      <p>线框按钮的边框颜色将变更为您设置的主色调。</p>
      <p>线框按钮会忽略您设置的lighter属性。</p>
      <p>若您未对线框按钮进行type的配置，将自动使用主题色。</p>
      <div class="OverviewArea">
        <p>Outline Button</p>
        <p>线框按钮展示</p>
        <div class="OverviewLine">
          <div class="OverViewItem">
            <LunaButton outline>Action</LunaButton>
            <p>Normal Outline Button</p>
            <p>常规无色线框按钮</p>
          </div>
          <div class="OverViewItem">
            <LunaButton outline type="primary">Action</LunaButton>
            <p>Primary Outline Button</p>
            <p>主色调线框按钮</p>
          </div>
          <div class="OverViewItem">
            <LunaButton outline type="success">Action</LunaButton>
            <p>Success Outline Button</p>
            <p>成功色调线框按钮</p>
          </div>
          <div class="OverViewItem">
            <LunaButton outline type="warning">Action</LunaButton>
            <p>Warning Outline Button</p>
            <p>警告色调线框按钮</p>
          </div>
          <div class="OverViewItem">
            <LunaButton outline type="error">Action</LunaButton>
            <p>Error Outline Button</p>
            <p>错误色调线框按钮</p>
          </div>
          <div class="OverViewItem">
            <LunaButton outline type="alert">Action</LunaButton>
            <p>Alert Outline Button</p>
            <p>特殊色调线框按钮</p>
          </div>
        </div>
        <highlightjs language="html" :code="OutlineButtonCode"></highlightjs>
      </div>
    </div>
    <div class="DocList">
      <h2>Template API</h2>
      <div class="ListTitle">
        <span>属性</span>
        <span>说明</span>
        <span>类型</span>
        <span>默认值</span>
      </div>
      <ul>
        <li>
          <span>type</span>
          <span>为按钮增加预设的主题颜色，可选值为primary, success, warning, error, alert或不设置</span>
          <span>String</span>
          <span>""</span>
        </li>
        <li>
          <span>lighter</span>
          <span>降低按钮主题色的明度，采用更加柔和的颜色</span>
          <span>Boolean</span>
          <span>false</span>
        </li>
        <li>
          <span>disable</span>
          <span>将按钮置于不可点击的状态，类似于原生按钮的Disabled属性</span>
          <span>Boolean</span>
          <span>false</span>
        </li>
        <li>
          <span>icon</span>
          <span>为按钮添加一个字体图标</span>
          <span>String</span>
          <span>""</span>
        </li>
        <li>
          <span>iconSize</span>
          <span>自定义按钮内字体图标的字号大小，仅在声明icon属性后生效</span>
          <span>Number / String</span>
          <span>16</span>
        </li>
        <li>
          <span>suffix</span>
          <span>将icon属性声明的图标后置处理，当同时声明fab状态时应当取消此属性</span>
          <span>Boolean</span>
          <span>false</span>
        </li>
        <li>
          <span>text</span>
          <span>将按钮形态变更为仅显示主题色文本的形态</span>
          <span>Boolean</span>
          <span>false</span>
        </li>
        <li>
          <span>outline</span>
          <span>将按钮形态变更为仅显示主题色文本与边框的形态</span>
          <span>Boolean</span>
          <span>false</span>
        </li>
        <li>
          <span>fab</span>
          <span>将按钮形态变更为纵向排列的形态</span>
          <span>Boolean</span>
          <span>false</span>
        </li>
        <li>
          <span>size</span>
          <span>当启用fab状态时，可以将按钮的宽高变为传入的相同的值，若为普通状态，则仅改变按钮的宽度</span>
          <span>Number / String</span>
          <span>9999</span>
        </li>
        <li>
          <span>top</span>
          <span>当启用fab状态同时启用此状态，将使按钮变为position: fixed状态，利用此属性定义按钮距离顶部高度</span>
          <span>Number / String</span>
          <span>9999</span>
        </li>
        <li>
          <span>bottom</span>
          <span>当启用fab状态同时启用此状态，将使按钮变为position: fixed状态，利用此属性定义按钮距离底部高度</span>
          <span>Number / String</span>
          <span>9999</span>
        </li>
        <li>
          <span>left</span>
          <span>当启用fab状态同时启用此状态，将使按钮变为position: fixed状态，利用此属性定义按钮距离左部高度</span>
          <span>Number / String</span>
          <span>9999</span>
        </li>
        <li>
          <span>right</span>
          <span>当启用fab状态同时启用此状态，将使按钮变为position: fixed状态，利用此属性定义按钮距离右部高度</span>
          <span>Number / String</span>
          <span>9999</span>
        </li>
      </ul>
    </div>
    <div class="DocList">
      <h2>Event API</h2>
      <div class="ListTitle">
        <span>属性</span>
        <span>说明</span>
        <span>类型</span>
        <span>默认值</span>
      </div>
      <ul>
        <li>
          <span>onClick</span>
          <span>返回原生点击事件</span>
          <span>Boolean</span>
          <span>false</span>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Button',
  data() {
    return {
      NormalButtonCode: `//常规无色按钮
<LunaButton>Action</LunaButton>
//常规按钮禁用
<LunaButton lighter disable>Action</LunaButton>
//主色调按钮
<LunaButton type="primary">Action</LunaButton>
//淡色主色调按钮
<LunaButton type="primary" lighter>Action</LunaButton>
//成功色调按钮
<LunaButton type="success">Action</LunaButton>
//淡色成功色调按钮
<LunaButton type="success" lighter>Action</LunaButton>
//警告色调按钮
<LunaButton type="warning">Action</LunaButton>
//淡色警告色调按钮
<LunaButton type="warning" lighter>Action</LunaButton>
//错误色调按钮
<LunaButton type="error">Action</LunaButton>
//淡色错误色调按钮
<LunaButton type="error" lighter>Action</LunaButton>
//特殊色调按钮
<LunaButton type="alert">Action</LunaButton>
//淡色特殊色调按钮
<LunaButton type="alert" lighter>Action</LunaButton>
`,
      IconButtonCode: `//常规图标按钮
<LunaButton type="primary" lighter icon="icon-kefu"><span>联系客服</span></LunaButton>
//图标后置按钮
<LunaButton type="primary" lighter icon="icon-kefu" suffix><span>联系客服</span></LunaButton>
`,
      FabButtonCode: `//无文本浮动按钮
<LunaButton type="primary" lighter fab icon="icon-kefu"></LunaButton>
//带有文本浮动按钮
<LunaButton type="success" lighter fab icon="icon-kefu"><span>联系客服</span></LunaButton>
//浮动按钮变更大小
<LunaButton type="primary" lighter fab icon="icon-kefu" :size="48"></LunaButton>
//浮动按钮图标变更大小
<LunaButton type="primary" lighter fab icon="icon-kefu" :iconSize="24"></LunaButton>
`,
      TextButtonCode: `//常规无色文本按钮
<LunaButton text>Action</LunaButton>
//主色调文本按钮
<LunaButton text type="primary">Action</LunaButton>
//成功色调文本按钮
<LunaButton text type="success">Action</LunaButton>
//警告色调文本按钮
<LunaButton text type="warning">Action</LunaButton>
//错误色调文本按钮
<LunaButton text type="error">Action</LunaButton>
//特殊色调文本按钮
<LunaButton text type="alert">Action</LunaButton>`,
      OutlineButtonCode: `//常规无色线框按钮
<LunaButton outline>Action</LunaButton>
//主色调线框按钮
<LunaButton outline type="primary">Action</LunaButton>
//成功色调线框按钮
<LunaButton outline type="success">Action</LunaButton>
//警告色调线框按钮
<LunaButton outline type="warning">Action</LunaButton>
//错误色调线框按钮
<LunaButton outline type="error">Action</LunaButton>
//特殊色调线框按钮
<LunaButton outline type="alert">Action</LunaButton>`
    }
  }
}
</script>

<style scoped></style>
